<template>
	<div class="app-container">
		<div>
			<el-form :inline="true" :model="listQuery" class="demo-form-inline" @submit.native.prevent>
				<el-form-item label="主播姓名">
					<el-input v-model="listQuery.q_name" size="small"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-select class="toolbar-lable-right" v-model="listQuery.q_state" placeholder="请选择" size="small">
						<el-option v-for="item in actStatus" :label="item.name" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" size="small" @click="this.getList">查询</el-button>
					<el-button icon="el-icon-refresh" size="small" @click="reset">重置</el-button>
				</el-form-item>
			</el-form>
			<div class="button-table-margin">
        <el-button size="small" type="primary" @click="details">查看</el-button>
        <el-button size="small" type="primary" @click="auditup" v-permission="['/admin/live/video/auditup']">审核通过</el-button>
        <el-button size="small" type="primary" @click="auditdown" v-permission="['/admin/live/video/auditdown']">审核驳回</el-button>
        <el-button size="small" type="primary" @click="down" v-permission="['/admin/live/video/down']">下架</el-button>
        <el-button size="small" type="primary" @click="edit" v-permission="['/admin/live/video/sort']">修改排序</el-button>
        <el-button size="small" type="primary" @click="liveVideoLog" v-permission="['/admin/live/video/listLog']">直播间日志</el-button>
			</div>
			<el-table ref="singleTable" v-loading="listLoading" :data="dataList" border fit highlight-current-row
				@current-change="handleCurrentChange" style="width: 100%">
				<el-table-column type="index" align="center" width="50"></el-table-column>
				<el-table-column property="anchorName" width="200" label="主播姓名" show-overflow-tooltip></el-table-column>
				<el-table-column property="sellerName" width="200" label="所属商家" show-overflow-tooltip></el-table-column>
				<el-table-column property="videoName" width="200" label="直播介绍" show-overflow-tooltip></el-table-column>
				<el-table-column property="typeName" width="200" label="直播分类" show-overflow-tooltip></el-table-column>
				<el-table-column property="praiseActual" width="200" label="实际点赞人数"></el-table-column>
				<el-table-column property="praiseVirtual" width="200" label="虚拟点赞人数"></el-table-column>
				<el-table-column property="lookActual" width="200" label="实际观看人数"></el-table-column>
				<el-table-column property="lookVirtual" width="200" label="虚拟观看人数"></el-table-column>
				<el-table-column property="startTime" width="200" label="直播开始时间"></el-table-column>
				<el-table-column property="endTime" width="200" label="直播结束时间"></el-table-column>
				<el-table-column property="state" width="150" label="状态">
					<template slot-scope="scope">
						{{ codeBox.ACT_STATUS[scope.row.state] }}
					</template>
				</el-table-column>
        <el-table-column property="isTop" width="150" label="是否置顶">
        	<template slot-scope="scope">
        		{{ codeBox.YES_NO[scope.row.isTop] }}
        	</template>
        </el-table-column>
        <el-table-column property="isVideo" width="150" label="是否开播">
        	<template slot-scope="scope">
        		{{ codeBox.YES_NO[scope.row.isVideo] }}
        	</template>
        </el-table-column>
        <el-table-column property="sort" width="150" label="权重"></el-table-column>
				<el-table-column property="auditUserName" width="200" label="审核人"></el-table-column>
				<el-table-column property="auditUserTime" width="200" label="审核时间"></el-table-column>
				<el-table-column property="updateUserName" width="200" label="创建人"></el-table-column>
				<el-table-column property="createTime" width="200" label="创建时间"></el-table-column>
			</el-table>
			<Pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
				@pagination="getList" />
		</div>

    <el-dialog title="修改排序" :visible.sync="dialogFormVisibleSort">
      <el-form ref="liveVideo" :rules="rules" :model="liveVideo" label-position="right" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="名称">
          <div class="yxkj-word-black" v-html="liveVideo.name"></div>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="liveVideo.sort" :min="0" :max="99" :precision="0"></el-input-number>
        </el-form-item>
        <el-form-item>
          <span class="form-word-hint">排序必须填写，输入0到99之间的数字，数字越大顺序越靠前</span>
        </el-form-item>
        <el-form-item label="虚拟点赞数" prop="praiseVirtual">
          <el-input-number v-model="liveVideo.praiseVirtual" :min="0" :max="999999" :precision="0"></el-input-number>
        </el-form-item>
        <el-form-item label="虚拟观看数" prop="lookVirtual">
          <el-input-number v-model="liveVideo.lookVirtual" :min="0" :max="999999" :precision="0"></el-input-number>
        </el-form-item>
        <el-form-item label="是否置顶" prop="isTop">
          <el-radio-group v-model="liveVideo.isTop">
            <el-radio v-for="item in yesNo" :key="item.value" :label="item.value">{{item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleSort = false">
          取消
        </el-button>
        <el-button type="primary" @click="sortLiveVideo()">
          提交
        </el-button>
      </div>
    </el-dialog>

    <el-dialog title="直播间日志" :visible.sync="dialogFormVisible">
    	<el-form :inline="true" ref="liveVideoLogQuery" :model="liveVideoLogQuery" class="demo-form-inline">
    		<el-form-item label="会员名称">
    			<el-input v-model="liveVideoLogQuery.q_memberName" size="small"></el-input>
    		</el-form-item>
        <el-form-item label="日志类型">
        	<el-select class="toolbar-lable-right" v-model="liveVideoLogQuery.q_type" placeholder="请选择" size="small">
        		<el-option v-for="item in videoLogTypes" :label="item.name" :value="item.value">
        		</el-option>
        	</el-select>
        </el-form-item>
    		<el-form-item>
    			<el-button type="primary" icon="el-icon-search" size="small" @click="getLiveVideoLogList">查询
    			</el-button>
    			<el-button icon="el-icon-refresh" size="small" @click="resetLiveVideoLog">重置</el-button>
    		</el-form-item>
    	</el-form>
    	<el-table ref="singleTable" :data="liveVideoLogList" height="450" border fit highlight-current-row
    		style="width: 100%">
    		<el-table-column property="memberName"  label="会员名称"></el-table-column>
        <el-table-column property="type" width="150" label="日志类型">
        	<template slot-scope="scope">
        		{{ codeBox.VIDEO_LOG_TYPE[scope.row.type] }}
        	</template>
        </el-table-column>
    		<el-table-column property="createTime" label="点赞时间"></el-table-column>
    	</el-table>
    	<Pagination v-show="liveVideoLogTotal>0" :total="liveVideoLogTotal" :page.sync="liveVideoLogQuery.page"
    		:limit.sync="liveVideoLogQuery.limit" @pagination="getLiveVideoLogList" />
    </el-dialog>

	</div>
</template>

<script>
	import {
		listLiveVideo,
		auditupLiveVideo,
		auditdownLiveVideo,
		downLiveVideo,
    sortLiveVideo,
    listProductLiveVideo,
    listCommentLiveVideo,
    listLogLiveVideo
	} from '@/api/live'
	import Pagination from '@/components/Pagination'
	import { Message } from 'element-ui'
	import {getCodeManager, codeToArray, uploadFileImage} from '@/api/all'
	export default {
		name: 'videolist',
		components: {
			Pagination
		},
		data() {
			return {
				currentRow: null,
				dataList: [],
				actStatus: [],
				yesNo: [],
				videoLogTypes: [],
				total: 0,
        dialogFormVisibleSort: false,
        dialogFormVisible: false,
        liveVideoLogTotal: 0,
        liveVideoLogList: [],
				listLoading: true,
				listQuery: {
					page: 1,
					limit: 20,
					q_name: '',
					q_state: ''
				},
        liveVideoLogQuery: {
					page: 1,
					limit: 20,
					q_type: '',
					q_memberName: ''
				},
        liveVideo: {
          id: 0,
          sort: '',
          isTop: '',
          name: '',
          praiseVirtual: '',
          lookVirtual: ''
        },
        rules: {
          sort: [{ required: true, message: '排序不能为空', trigger: 'change' }],
          isTop: [{ required: true, message: '请选择是否置顶', trigger: 'change' }],
          praiseVirtual: [{ required: true, message: '不能为空', trigger: 'change' }],
          lookVirtual: [{ required: true, message: '不能为空', trigger: 'change' }],
        }
			}
		},
		created() {
			getCodeManager('ACT_STATUS,YES_NO,VIDEO_LOG_TYPE', () => {
				this.actStatus = codeToArray('ACT_STATUS');
				this.yesNo = codeToArray('YES_NO');
				this.videoLogTypes = codeToArray('VIDEO_LOG_TYPE');
			})
			this.getList()
		},
		methods: {
			handleCurrentChange(val) {
				// 选中当前行数据
				this.currentRow = val
			},
			// 获取列表数据
			getList() {
				this.listLoading = true
				listLiveVideo(this.listQuery).then(response => {
					this.dataList = response.data.rows
					this.total = response.data.total
					this.listLoading = false
				})
			},
			reset() {
				this.listQuery = {
					page: 1,
					limit: 20,
					q_name: '',
					q_state: ''
				}
				this.getList()
			},
			auditup() {
				if (this.currentRow == null) {
					Message.error('请选择一条记录')
					return
				}
				if (this.currentRow.state != 2) {
					Message.error('只能操作审核通过的直播。')
					return
				}
				this.$confirm('确定审核通过吗？', '提示', {
					onfirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					auditupLiveVideo({
						id: this.currentRow.id
					}).then(response => {
						if (!response.data.success) {
							Message.error(response.data.message);
							return;
						}
						Message.success('操作成功')
						this.getList()
					})
				})
			},
			auditdown() {
				if (this.currentRow == null) {
					Message.error('请选择一条记录')
					return
				}
				if (this.currentRow.state != 2) {
					Message.error('只能操作审核通过的直播。')
					return
				}
				this.$confirm('确定审核驳回吗？', '提示', {
					onfirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					auditdownLiveVideo({
						id: this.currentRow.id
					}).then(response => {
						if (!response.data.success) {
							Message.error(response.data.message);
							return;
						}
						Message.success('操作成功')
						this.getList()
					})
				})
			},
			down() {
				if (this.currentRow == null) {
					Message.error('请选择一条记录')
					return
				}
				this.$confirm('确定下架吗？', '提示', {
					onfirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					downLiveVideo({
						id: this.currentRow.id
					}).then(response => {
						if (!response.data.success) {
							Message.error(res.data.message);
							return;
						}
						Message.success('操作成功')
						this.getList()
					})
				})
			},
			details() {
				if (this.currentRow == null) {
					Message.error('请选择一条记录')
					return
				}
				this.$router.push({
					path: "/live/videolook",
					query: {
						id: this.currentRow.id
					}
				})
			},
      edit() {
        if(this.currentRow == null) {
          Message.error('请选择一条记录')
          return
        }
        this.liveVideo = {
          id: this.currentRow.id,
          name: this.currentRow.videoName,
          sort: this.currentRow.sort,
          lookVirtual: this.currentRow.lookVirtual,
          praiseVirtual: this.currentRow.praiseVirtual,
          isTop: this.currentRow.isTop + ''
        }
        this.dialogFormVisibleSort = true
        this.$nextTick(() => {
          this.$refs['liveVideo'].clearValidate()
        })
      },
      sortLiveVideo() {
        this.$refs['liveVideo'].validate((valid) => {
          if (valid) {
            sortLiveVideo(this.liveVideo).then(res => {
              if(!res.data.success) {
                Message.error(res.data.message);
                return;
              }
              this.dialogFormVisibleSort = false
              this.getList()
              Message.success('操作成功')
            })
          }
        })
      },
      liveVideoLog() {
      	if (this.currentRow == null) {
      		Message.error('请选择一条记录')
      		return
      	}
      	this.dialogFormVisible = true
      	this.getLiveVideoLogList()
      },
      getLiveVideoLogList() {
      	let newListQyery = {
      		q_videoId: this.currentRow.id,
      		...this.liveVideoLogQuery
      	}
      	listLogLiveVideo(newListQyery).then(response => {
      		this.liveVideoLogList = response.data.rows
      		this.liveVideoLogTotal = response.data.total
      	})
      },
      resetLiveVideoLog() {
      	this.liveVideoLogQuery = {
      		page: 1,
      		limit: 20,
      		q_memberName: '',
      		q_type: ''
      	}
      	this.getLiveVideoLogList()
      },
		}
	}
</script>

<style>
</style>
